<template>
	<view class="strategy-page-container">
		<!-- 1. 顶部导航栏 -->
		<view class="top-nav-bar customHeader">
			<up-icon class="back-arrow" name="arrow-leftward" color="#fff" @click="goBack" />
			<text class="title">{{ searchQuery }}</text>
		</view>

		<!-- 2. Tab切换 -->
		<view class="tabs-container">
			<view class="tab-item" :class="{ active: activeTab === 'recommended' }" @click="activeTab = 'recommended'">
				推荐
			</view>
			<view class="tab-item" :class="{ active: activeTab === 'all' }" @click="activeTab = 'all'">
				全部
			</view>
		</view>

		<!-- 3. 内容区 -->
		<view class="content-area">
			<view class="sidebar" v-if="activeTab === 'all'">
				<view class="sidebar-item active">热门</view>
				<!-- 可以添加更多分类 -->
			</view>

			<view class="game-grid">
				<!-- 推荐游戏列表 -->
				<view v-if="activeTab === 'recommended'" class="grid-recommended">
					<view v-for="game in recommendedGames" :key="game.id" class="game-card">
						<image :src="game.image" class="game-view" mode="fill" @click="handleGameView(game)"></image>
						<view class="game-view-info" style="margin-bottom: 10rpx">
							<text class="game-name">{{ game.name }}</text>
							<text class="subscribe-btn" v-if="!game.is_subscribe" @click="handleSubscribe(game)">+
								订阅</text>
							<text class="subscribe-btn" v-else @click="handleSubscribe(game)">取消订阅</text>
						</view>
						<view class="game-view-info">
							<text class="game-title">{{ game.info }}</text>
							<text class="game-title-subs">{{ game.hotness }}人订阅</text>
						</view>
					</view>
				</view>

				<!-- 全部游戏列表 -->
				<view v-if="activeTab === 'all'" class="grid-container" style="padding: 20rpx">
					<view v-for="game in gameList" :key="game.id" class="game-card">
						<image :src="game.icon" class="game-icon" mode="aspectFill"></image>
						<text class="game-name">{{ game.name }}</text>
						<text class="game-subs">{{ game.hotness }}人订阅</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		getGameList
	} from "@/api";
	import {
		showToast
	} from "@/utils/helper";
	// 当前激活的Tab
	const activeTab = ref("recommended");
	const gameList = ref([]);
	const recommendedGames = ref([]);
	const gameInfo = ref([{
			id: 1,
			game: "原神",
			info: "游戏发生在一个被称作“提瓦特大陆”的幻想世界，在这里，被神选中的人将被授予“神之眼”，导引元素之力。玩家将扮演一位名为“旅行者”的神秘角色，在自由的旅行中邂逅性格各异、能力独特的同伴们，和他们一起击败强敌，找回失散的亲人——同时，逐步发掘“原神”的真相",
			image: "https://cphimg.leyoo888.com/dev/upload/supplier/2025-08-24/1756005641178.webp",
			url: "https://ys.mihoyo.com/main",
		},
		{
			id: 2,
			game: "崩坏·星穹轨道",
			info: "游戏中，玩家将登上星穹列车，造访寓居宇宙的万象世界，携手形形色色的旅伴，解救“星核”引发的种种危机，对抗“星神”践踏文明的意图",
			image: "https://act-webstatic.mihoyo.com/puzzle/hkrpg/pz_2Mmoz7kMdq/resource/puzzle/2025/07/24/f629f9da751389b037b1f2bc63bba9c2_1548850742170842337.png?x-oss-process=image/format,webp/quality,Q_90",
			url: "https://sr.mihoyo.com/main?nav=home",
		},
		{
			id: 3,
			game: "绝区零",
			info: "绝区零》是米哈游自研的全新都市动作冒险游戏。它的故事发生在被神秘的超自然灾害「空洞」所侵袭的近未来。在这灾祸频仍的世界里,崛起了一座另类的城市——「新艾利都」",
			image: "https://fastcdn.mihoyo.com/content-v2/nap/102005/37198ce9c5ee13abb2c49f1bd1c3ca97_7702488080246216541.png",
			url: "https://zzz.mihoyo.com/?utm_source=sembd3",
		},
		{
			id: 4,
			game: "王者荣耀",
			info: "腾讯天美工作室推出的英雄竞技手游,不是一个人的王者,而是团队的荣耀!5v5王者峡谷PVP对战,领略英雄竞技的酣畅淋漓!丰富的游戏模式等你参与,体验突破传统、英雄竞技新形态!",
			image: "https://game.gtimg.cn/images/yxzj/web202311/bg-c1373a49.jpg",
			url: "https://pvp.qq.com/",
		},
		{
			id: 5,
			game: "和平精英",
			info: "未来，和平成为世界主流。但出于战略意义上的考虑，以及训练成果考核的需要，各国约定：每隔一段时间，便进行一场世界范围内的联合军事演习。目标是考察特种兵在恶劣条件下的搜集侦察与野外作战能力，并以此挑选出“和平精英”。",
			image: "https://game.gtimg.cn/images/gp/web202411/new0619/sec3-features-img1.jpg",
			url: "https://gp.qq.com/main.shtml",
		},
	]);
	const getGameListData = async () => {
		const num = 20000;
		const res = await getGameList();
		res.data = res.data.map((i, index) => ({
			...i,
			category: "热门游戏",
			hotness: num - index * 458,
			is_subscribe: false,
			...gameInfo.value[index],
		}));
		gameList.value = res.data;
		getRecommendedGamesList();
	};
	const page = ref(1);
	const loadingStatus = ref("more"); // more: 加载更多, loading: 加载中, noMore: 没有更多了

	const getRecommendedGamesList = async () => {
		if (loadingStatus.value !== "more") {
			return;
		}
		loadingStatus.value = "loading";

		const pageSize = 5;
		const startIndex = (page.value - 1) * pageSize;
		const endIndex = page.value * pageSize;
		const newGames = gameList.value.slice(startIndex, endIndex);

		if (newGames.length > 0) {
			recommendedGames.value.push(...newGames);
			page.value++;
			loadingStatus.value = "more";
		}

		if (recommendedGames.value.length >= gameList.value.length) {
			loadingStatus.value = "noMore";
		}
	};
	const goBack = () => {
		uni.navigateBack();
	};
	const handleSubscribe = (game) => {
		game.is_subscribe = !game.is_subscribe;
		showToast(game.is_subscribe ? "已订阅" : "已取消订阅");
	};
	const handleGameView = (game) => {
		uni.navigateTo({
			url: `/pages/search/webView?url=${encodeURIComponent(game.url)}`,
		});
	};

	onReachBottom(() => {
		if (activeTab.value === "recommended") {
			console.log("滚动到底部了，加载更多推荐游戏...");
			getRecommendedGamesList();
		}
	});

	const searchQuery = ref("搜索结果");
	onLoad((options) => {
		options.searchQuery && (searchQuery.value = options.searchQuery);
		getGameListData();
	});
</script>

<style scoped lang="scss">
	.strategy-page-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #fff;
	}

	/* 顶部导航 */
	.top-nav-bar {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 16rpx 30rpx;
		background-color: #4caf50;
		/* Green background */
		color: white;
		height: 88rpx;
	}

	.back-arrow {
		font-size: 48rpx;
		font-weight: bold;
	}

	.title {
		font-size: 32rpx;
		padding-left: 20rpx;
	}

	.done-button {
		font-size: 30rpx;
	}

	/* Tabs */
	.tabs-container {
		display: flex;
		background-color: #4caf50;
		color: white;
		height: 80rpx;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		line-height: 80rpx;
		font-size: 30rpx;
		position: relative;
		opacity: 0.8;
	}

	.tab-item.active {
		font-weight: bold;
		opacity: 1;
	}

	.tab-item.active::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 11.875rem;
		height: 6rpx;
		background-color: white;
		border-radius: 3rpx;
	}

	/* 内容区 */
	.content-area {
		display: flex;
		flex: 1;
		overflow: hidden;
	}

	.sidebar {
		width: 160rpx;
		background-color: #f5f5f5;
	}

	.sidebar-item {
		padding: 24rpx 0;
		text-align: center;
		font-size: 28rpx;
		color: #555;
	}

	.sidebar-item.active {
		background-color: #fff;
		color: #333;
		font-weight: bold;
	}

	.game-grid {
		flex: 1;
		//   padding: 20rpx;
		overflow-y: auto;
	}

	.grid-container {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;

		.game-card {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.game-icon {
			width: 150rpx;
			height: 150rpx;
			border-radius: 24rpx;
			margin-bottom: 10rpx;
		}

		.game-name {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 4rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
		}

		.game-subs {
			font-size: 22rpx;
			color: #999;
		}
	}

	.grid-recommended {
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		.game-card {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.game-view {
			width: 100%;
			height: 380rpx;
			margin-bottom: 10rpx;
		}

		.game-view-info {
			display: flex;
			justify-content: space-between;
			width: 94%;
			align-items: center;

			.game-name {
				font-size: 28rpx;
				color: #333;
				margin-bottom: 4rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				width: 80%;
				font-weight: 600;
			}

			.subscribe-btn {
				width: 120rpx;
				height: 40rpx;
				line-height: 42rpx;
				text-align: center;
				background-color: #fff;
				border: 1px solid #ff8c00;
				color: #ff8c00;
				font-size: 24rpx;
				border-radius: 28rpx;
				padding: 0;
				margin: 0;
			}

			.game-title {
				font-size: 26rpx;
				color: #ccc;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				width: 80%;
				margin-bottom: 4rpx;
			}

			.game-title-subs {
				font-size: 22rpx;
				color: #ccc;
			}
		}
	}
</style>